<template>
  <div class="context">
    <!--搜索框-->
    <!-- <el-input style="width: 400px; margin: 20px 20px 20px 20px" v-model="inputValue" placeholder="请输入内容"
      prefix-icon="el-icon-search">
    </el-input> -->
    <div class="cardheard">
      <el-button type="primary" @click="showadd" style="height: 40px; margin: 0px 0px 0px 20px">
        批量生成</el-button>
    </div>

    <template>
      <el-table :data="Users" style="width: 100%" height="80%">
        <el-table-column type="index" width="50" >
        </el-table-column>
        <!-- <el-table-column label="ID">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column> -->

        <el-table-column label="卡密">
          <template slot-scope="scope">
            <span>{{ scope.row.card }}</span>
          </template>
        </el-table-column>


        <el-table-column label="生成时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime}}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作">

          <template>
            <!-- <el-button type="text" @click="looknote(scope.$index, scope.row)" size="small">查看</el-button> -->
            <el-button type="text" size="small">操作</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">

        <el-pagination 
      @current-change="handleCurrentChange"
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

      </div>
    </template>



<template>
    <el-dialog
      title="批量添加"
      :visible.sync="dialogresetVisible"
      width="30%"
      center
    >
      <el-form :model="newtable">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogresetVisible = false">取 消</el-button>
        <el-button type="primary" @click="addcards">确 定</el-button>
      </div>
    </el-dialog>
  </template>



  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',//数量
      options: [{
          value: '1',
          label: '随机生成100条'
        }],
       data:[],
      formLabelWidth: "120px",
      newtable:{
        header:"",
        begin:"",
        end:""
      },
      dialogresetVisible:false,
      pagecount: 99,//查询的总数
      currentPage4:4,
      Users: [],//用户数据数组
      req: {
        "pageIndex": 0,
        "pageCount": 10
      }
    };
  },
  
  created() {
    var that = this;
    console.log("Vue 初始化完成 created");
    this.pushdata();
  },
  methods: {
    showadd(){
      this.dialogresetVisible=true
    },
    addcards(){

      if(this.value==""){
        this.$message.info({
            message: "请选择生成数量"
          });
          return
      }

    
      var that = this;
      that.$axios
        .get("/api/Card/addCards?Type="+that.value)
        .then(function(response) {
          console.log(response.data);
          that.$message.success({
            message: "操作成功"
          });
        })
        .catch(function(error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });

        that.dialogresetVisible=false
    },
    next(a){
      console.log(a);
    },
    reset() {
    this.req = {
      "pageIndex": 0,//每次请求数据的开始位置
      "pageCount": 10//每次请求数据的总量
    }
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      if (val != 1) {
        var statcount = (val - 1) * this.req.pageCount
        this.req.pageIndex = statcount
        console.log("当前开始index--" + statcount);
      } else {
        this.req.pageIndex = 0
        console.log("当前开始index--" + statcount);
      }

      console.log(this.req);
      this.pushdata()
    },


    pushdata() {
      var that = this;
     

      this.$axios.post("/api/Card/showCard", {
        "pageIndex": that.req.pageIndex,
        "pageCount":  that.req.pageCount,
      })
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.Users = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>

</style>
